import {Component, OnInit} from '@angular/core';
import {
    FormBuilder,
    FormGroup,
    Validators,
    FormControl
} from '@angular/forms';
import {Observable} from "rxjs/Observable";
import {HttpService} from "../../service/http.service";
import {MomentService} from "../../service/moment.service";
import {JqueryService} from "../../service/jquery.service";
@Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.less']
})



export class RegisterComponent implements OnInit {
    validateForm: FormGroup;

    constructor(private fb: FormBuilder, public httpService: HttpService,public moment:MomentService,public jquery:JqueryService) {
        this.validateForm = this.fb.group({
            username: ['aaa', [Validators.required], [this.userNameAsyncValidator]],
            email: ['aaa@qq.com', [this.emailValidator]],
            birthDay: ['2018-04-12', [this.birthDayValidator]],
            password: ['111', [Validators.required]],
            passwordConfirmation: ['', [this.passwordConfirmationValidator]],
            comment: ['aaa', [Validators.required]],
            sex: ['boy', Validators.required]
        });
        

    }

    ngOnInit() {
    }

    submitForm = ($event, value) => {

        $event.preventDefault();
        for (const key in this.validateForm.controls) {
            this.validateForm.controls[key].markAsDirty();
        }
        console.log(`value.birthDay ------> `,value.birthDay)
        console.log(this.moment)
        
        value.birthDay =Date.parse(this.moment.moment(value.birthDay).format());
        this.httpService.register(value).subscribe(res => {
            console.log(`res ------> `, res)
        });
    };

    resetForm($event: MouseEvent) {
        $event.preventDefault();
        this.validateForm.reset();
        for (const key in this.validateForm.controls) {
            this.validateForm.controls[key].markAsPristine();
        }
    }

    validateConfirmPassword() {
        setTimeout(_ => {
            this.validateForm.controls['passwordConfirmation'].updateValueAndValidity();
        })
    }

    userNameAsyncValidator = (control: FormControl): any => {
        return Observable.create(function (observer) {
            setTimeout(() => {
                if (control.value === 'JasonWood') {
                    observer.next({error: true, duplicated: true});
                } else {
                    observer.next(null);
                }
                observer.complete();
            }, 1000);
        });
    };

    getFormControl(name) {
        return this.validateForm.controls[name];
    }

    emailValidator = (control: FormControl): { [s: string]: boolean } => {
        const EMAIL_REGEXP = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
        if (!control.value) {
            return {required: true}
        } else if (!EMAIL_REGEXP.test(control.value)) {
            return {error: true, email: true};
        }
    };
    passwordConfirmationValidator = (control: FormControl): { [s: string]: boolean } => {
        if (!control.value) {
            return {required: true};
        } else if (control.value !== this.validateForm.controls['password'].value) {
            return {confirm: true, error: true};
        }
    };
    birthDayValidator = (control: FormControl): any => {
        if (new Date(control.value) > new Date()) {
            return {expired: true, error: true}
        }
    };
}
